{% extends "base.html" %} {% load static %} {% block extra_head %}
<script src="{% static 'js/echarts.js'%}"></script>
<link rel="stylesheet" href="{% static 'css/tma_caculate.css' %}" />
{% endblock extra_head %} {% block main %} {% if user.is_authenticated %}

<div class="d-flex w-100 h-100 tma_caculate">
  <div class="col-4">
    <div class="d-flex mt-1 flex-row-reverse me-1">
      <button
        type="button"
        class="btn btn-outline-success submit_btn"
        @click="submit_new_tma_lines"
      >
        <span v-if="! tma_prediction_processing">提交</span>
        <span
          v-if="tma_prediction_processing"
          class="spinner-border spinner-border-sm"
          role="status"
        ></span>
      </button>
      <input
        id="upload_file"
        type="file"
        accept=".jpg, .jpeg, .png"
        @change="submit_image_file"
        class="mx-4 prevent_select form-control"
        style="width: 200px"
        :disabled="tma_prediction_processing"
      />
      <button
        type="button"
        class="btn btn-outline-danger"
        @click="resetdata"
        :disabled="tma_prediction_processing"
      >
        Reset
      </button>
    </div>

    <div class="border py-3 ps-2 mt-1 me-1">
      <div class="d-flex">
        <div>
          <div class="d-flex">
            <div class="ps-1 border rounded estimated_track input-group-text">
              TMA不参考截图航迹推测
            </div>

            <div class="ms-1 input-group" style="width: 120px">
              <span
                class="input-group-text"
                id="basic-input-01"
                v-if="predict_tracks.length > 0"
              >
                [[ pd_without_track.track_heading[0] ]] / [[
                pd_without_track.track_heading[1] ]]
              </span>
            </div>
          </div>

          <div class="d-flex mt-1">
            <div class="ps-1 border rounded detected_track input-group-text">
              TMA结合截图中航迹推测
            </div>

            <div class="ms-1 input-group" style="width: 120px">
              <span
                class="input-group-text"
                id="basic-input-01"
                v-if="predict_tracks.length == 2"
              >
                [[ pd_with_track.track_heading[0] ]] / [[
                pd_with_track.track_heading[1] ]]
              </span>
            </div>
          </div>
        </div>

        <div
          class="px-1 border rounded d-flex align-items-center"
          v-if="predict_track_ratio != 0"
        >
          <div>
            <div class="estimated_track">predicted_track</div>
            <div>-----------------</div>
            <div class="detected_track">detected_track</div>
          </div>
          <div class="px-2">=</div>
          <div>[[ predict_track_ratio ]]</div>
        </div>
      </div>

      <div id="chart" ref="div_canvas" class="w-100"></div>
    </div>

    <div
      class="ekelund_range_enhance_chart"
      id="ekelund_range_enhance_chart"
    ></div>
  </div>

  <div class="col-8 prevent_select w-100 h-100 d-flex">
    <div class="line_index">
      <div v-for="data,index in series_lines">
        <div
          class="d-flex index_button_container"
          @mouseover="hl_line(data.id)"
          @mouseleave="not_hl_line(data.id)"
        >
          <button
            type="button"
            class="btn btn-outline-primary del_button"
            @click="delete_hl_line(data.id)"
          >
            t[[ bl_time_tick[index] ]]
          </button>
          <div
            :class="{plus_icon_active: data.id != active_plus_data_id}"
            class="plus_icon"
            @click="insert_a_tick(data.id)"
            @contextmenu.prevent="delete_a_tick(data.id, index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="23"
              height="23"
              fill="currentColor"
              class="bi bi-plus-slash-minus border rounded pt-2"
              viewBox="0 0 16 16"
            >
              <path
                d="m1.854 14.854 13-13a.5.5 0 0 0-.708-.708l-13 13a.5.5 0 0 0 .708.708M4 1a.5.5 0 0 1 .5.5v2h2a.5.5 0 0 1 0 1h-2v2a.5.5 0 0 1-1 0v-2h-2a.5.5 0 0 1 0-1h2v-2A.5.5 0 0 1 4 1m5 11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5A.5.5 0 0 1 9 12"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="track_info">
      <div class="border py-2 ps-2 w-100">
        <span
          @click="toggle_explaination = !toggle_explaination"
          class="badge mb-1 fs-6 text-bg-secondary"
          >非必填项目</span
        >
        <div
          class="card ms-3 me-4 mb-2"
          :class="{ explaination_active: toggle_explaination }"
        >
          <div class="card-body">
            非必要填写项目. 如果填写，将被用作Ekelund ranging
          </div>
        </div>
        <div class="d-flex">
          <div
            class="ps-2 me-1 pt-2 border rounded"
            style="width: 150px; background-color: #eceff7"
          >
            本艇运动参数
          </div>

          <div class="input-group" style="width: 140px">
            <span class="input-group-text" id="basic-input-02">速度(节)</span>
            <input
              class="form-control"
              aria-describedby="basic-input-02"
              v-model="own_sub_spd"
              onfocus="this.select()"
            />
          </div>

          <div class="ms-2 input-group" style="width: 120px">
            <span class="input-group-text" id="basic-input-03">航向</span>
            <input
              class="form-control"
              aria-describedby="basic-input-03"
              v-model="own_sub_course"
              onfocus="this.select()"
            />
          </div>
        </div>

        <div class="d-flex mt-1">
          <div
            class="ps-2 pt-2 me-1 border rounded"
            style="width: 150px; background-color: #eceff7"
          >
            敌艇预估速度
          </div>

          <div class="input-group" style="width: 140px">
            <span class="input-group-text" id="basic-input-04">速度(节)</span>
            <input
              class="form-control"
              aria-describedby="basic-input-04"
              v-model="target_sub_spd"
              onfocus="this.select()"
            />
          </div>
        </div>

        <span class="badge mt-2 fs-6 text-bg-secondary">计算镜像方位</span>

        <div class="d-flex mt-1">
          <div class="input-group" style="width: 150px">
            <span class="input-group-text" id="basic-input-05"
              >本艇航向(°)</span
            >
            <input
              class="form-control"
              aria-describedby="basic-input-05"
              v-model="own_sub_course"
              onfocus="this.select()"
            />
          </div>
          <div class="input-group ms-1" style="width: 140px">
            <span class="input-group-text" id="basic-input-06"
              >目标方位(°)</span
            >
            <input
              class="form-control"
              aria-describedby="basic-input-06"
              v-model="target_bearing"
              onfocus="this.select()"
            />
          </div>

          <div class="input-group ms-1" style="width: 120px">
            <span class="input-group-text" id="basic-input-07"
              >镜像方位(°)</span
            >
            <input
              class="form-control"
              disabled="true"
              aria-describedby="basic-input-07"
              v-model="target_bearing_mirror"
            />
          </div>
        </div>
      </div>

      <div class="w-100 border py-3 ps-2 mt-3" ref="div_canvas_02">
        <div class="me-2 w-100" v-show=" ekelund_range  !== null">
          <label class="me-4" style="font-size: 1.3rem">
            Total cross bearing line speed: [[ ekelund_range_cross_spd ]]
          </label>
          <label v-if="own_cross_spd_list.length>0" style="font-size: 1.3rem">
            ( own_cross_bl_spd: t0: [[ own_cross_spd_list[0] ]] / tz: [[
            own_cross_spd_list.at( -1) ]] )
          </label>
          <input
            v-model="ekelund_range_cross_spd"
            type="range"
            :min="ekelund_range_spd_btm"
            :max="ekelund_range_spd_top"
            class="slider"
            id="myRange"
          />
        </div>

        <div class="ekelund_range_chart" id="ekelund_range_chart"></div>
      </div>
    </div>
  </div>
</div>
<script src="{% static 'js/tma_caculate.js' %}"></script>
{% else %} {% include "pcs_login.html" %} {% endif %} {% endblock %}
